<template>
  <div class="payment-container">
    <div class="content-wrapper">
      <el-steps :active="activeStep" align-center>
        <el-step title="提交内容" />
        <el-step title="支付费用" />
        <el-step title="处理完成" />
      </el-steps>


      <!-- 金额展示区域 - 添加这个部分 -->
      <div class="amount-box">
        <span class="amount-label">应付金额：</span>
        <span class="amount">¥ {{ amount }}</span>
      </div>


      <!-- 支付二维码 -->
      <div v-if="qrCodeUrl" class="qr-code-box">
        <img :src="qrCodeUrl" alt="支付二维码">
        <!-- 新增微信支付图标和提示 -->
        <div class="wechat-pay-indicator">
          <svg class="wechat-icon" viewBox="0 0 1024 1024" width="20" height="20">
            <path d="M692.699 347.25c4.444 0 8.889 0.062 13.272 0.3-11.913-55.495-71.173-96.647-138.676-96.647-75.617 0-137.821 51.668-137.821 117.618 0 38.057 20.739 69.447 55.3 93.723l-13.829 41.666 48.308-24.199c17.286 3.398 31.175 6.897 48.339 6.897 4.353 0 8.641-0.208 12.895-0.546a94.3 94.3 0 0 1-3.893-26.855c0.001-60.445 51.851-111.957 116.105-111.957zM602.176 303.407c10.421 0 17.347 6.896 17.347 17.347 0 10.358-6.927 17.378-17.347 17.378-10.358 0-20.708-7.02-20.708-17.378 0-10.452 10.359-17.347 20.708-17.347zM500.608 338.144c-10.359 0-20.77-7.02-20.77-17.378 0-10.452 10.411-17.347 20.77-17.347 10.389 0 17.347 6.896 17.347 17.347 0 10.358-6.958 17.378-17.347 17.378z" fill="#09BB07"></path>
            <path d="M511.667 0.121C229.161 0.121 0 229.282 0 511.758s229.161 511.637 511.667 511.637 511.637-229.161 511.637-511.637S794.143 0.121 511.667 0.121z m-91.162 632.484c-27.555 0-49.607-5.566-76.947-13.89l-76.854 38.49 21.963-65.989c-55.3-38.52-82.95-86.796-82.95-146.424 0-103.142 97.687-183.846 214.787-183.846 105.598 0 198.24 64.354 216.797 151.028 0.269-1.89 0.484-3.771 0.721-5.662a120.03 120.03 0 0 0 0.968-15.16c0-104.354-69.848-183.949-172.858-183.949-34.15 0-68.975 8.98-103.883 22.531l-10.297-5.082-11.482 3.554 1.145-4.353-103.142 51.606 29.384-88.747c-48.215-34.213-76.162-79.073-76.162-127.074C192.695 257.014 290.33 177.9 409.28 177.9c105.659 0 202.664 73.395 202.664 166.746-36.329 2.79-70.027 13.705-97.976 30.375-24.197-9.92-50.483-15.256-76.854-15.256-115.363 0-207.421 78.76-207.421 177.105 0 16.339 2.428 32.019 6.697 46.96-12.087 9.919-18.814 21.33-18.814 33.912 0 7.02 1.487 13.798 4.353 20.306-0.578 3.37-0.938 6.835-0.938 10.482 0 60.507 41.666 112.235 97.749 138.676l-22.552 67.796 79.95-39.923c17.778 3.522 32.389 5.473 46.92 5.496 4.353 0 8.673-0.177 12.957-0.517a117.73 117.73 0 0 1-2.74-25.137c-0.001-65.618 56.386-118.899 126.265-118.899 6.927 0 13.705 0.608 20.43 1.518-1.85-8.919-2.851-18.069-2.851-27.493 0-78.029 74.428-141.265 166.684-141.265 6.958 0 13.798 0.422 20.616 1.208 0.33-4.971 0.546-9.98 0.546-15.038 0-99.394-97.004-179.98-216.52-179.98-19.559 0-38.52 2.428-56.786 6.073-11.606-11.514-26.932-18.256-43.427-18.256-34.687 0-62.749 28.132-62.749 62.719 0 12.18 3.492 23.528 9.46 33.077-0.67 4.723-1.024 9.513-1.024 14.388 0 10.39 1.301 20.461 3.678 30.093-86.797 22.7-148.822 95.727-148.822 182.307 0.001 63.512 35.358 119.537 90.131 154.133z" fill="#09BB07"></path>
            <path d="M616.282 512.181c0 8.765-6.897 17.621-17.347 17.621-10.359 0-17.347-8.857-17.347-17.621 0-8.703 6.988-17.316 17.347-17.316 10.451 0 17.347 8.612 17.347 17.316zM735.059 512.181c0 8.765-6.897 17.621-17.255 17.621-10.42 0-17.378-8.857-17.378-17.621 0-8.703 6.958-17.316 17.378-17.316 10.358 0 17.255 8.612 17.255 17.316z" fill="#09BB07"></path>
          </svg>
          <span>仅支持微信支付</span>
        </div>
        <!-- 支付提示文字 -->
        <p class="payment-tip">支付过程请勿离开当前页面！</p>
      </div>

        <!-- 新增：刷新支付状态按钮 -->
        <el-button
            type="primary"
            size="large"
            class="refresh-button"
            :disabled="!qrCodeUrl || isCheckingPayment"
            @click="refreshPaymentStatus"
            :loading="isCheckingPayment"
        >
          {{ isCheckingPayment ? '正在查询支付状态...' : '刷新支付状态' }}
        </el-button>
      </div>
    </div>
</template>

<script>
import { Download, Warning, Loading } from '@element-plus/icons-vue';
import { downloadFile } from '../../api';
import axios from 'axios';
import QRCode from 'qrcode';
import { usePaymentStore } from '../store/paymentStore';

export default {
  data() {
    return {
      activeStep: 1,
      amount: this.$route.query.amount || '0.00',
      qrCodeUrl: '',
      isPaymentSuccess: false,
      outTradeNo: this.$route.query.outTradeNo, // 获取传递过来的订单号
      isCheckingPayment: false, // 新增：查询支付状态的加载状态
    };
  },
  async created() {
    const paymentStore = usePaymentStore();
    try {
      // 如果订单未支付，创建新订单
      const response = await axios.post('/payment/createOrder', {
        total: parseFloat(this.amount) * 100,
        description: 'aigc降重服务',
        out_trade_no: this.outTradeNo
      });

      // 直接访问已解析的响应数据
      const codeUrl = response.data.code_url;

      // 保存 code_url 到全局状态
      paymentStore.setCodeUrl(codeUrl);

      // 生成二维码
      this.qrCodeUrl = await QRCode.toDataURL(codeUrl);
    } catch (error) {
      console.error('完整响应数据:', error.response?.data || error);
      if (error.response && error.response.status === 400 && error.response.data.code === 'INVALID_REQUEST') {
        const savedCodeUrl = paymentStore.getCodeUrl;
        if (savedCodeUrl) {
          // 读取之前保存的 code_url 生成二维码
          this.qrCodeUrl = await QRCode.toDataURL(savedCodeUrl);
          return;
        }
      }
      this.$message.error('创建订单失败，请检查网络或联系客服');
    }
  },
  beforeUnmount() {
    if (this.outTradeNo) {
      axios.post('/payment/closeOrder', { outTradeNo: this.outTradeNo })
          .then(response => {
            if (response.data.success) {
              console.log('订单关闭成功');
            } else {
              console.error('订单关闭失败:', response.data.message);
            }
          })
          .catch(error => {
            console.error('请求出错:', error.message);
          });
    }
  },
  methods: {
    // 修改：刷新支付状态方法添加加载状态
    async refreshPaymentStatus() {
      // 设置查询中状态为true
      this.isCheckingPayment = true;

      try {
        const response = await axios.get(`/payment/queryOrder?outTradeNo=${this.outTradeNo}`);
        const data = response.data;
        if (data.trade_state === 'SUCCESS') {
          this.isPaymentSuccess = true;
          this.$message.success('支付成功');
          // 跳转到 HomeView 页面，并传递支付成功的标志
          this.$router.push({ name: 'home', query: { paymentSuccess: true } });
        } else {
          this.$message.info(`支付状态：${data.trade_state_desc}`);
        }
      } catch (error) {
        console.error('查询订单失败:', error);
        this.$message.error('查询订单失败，请检查网络或联系客服');
      } finally {
        // 无论成功还是失败，最后都将查询中状态设为false
        this.isCheckingPayment = false;
      }
    }
  },
  components: {
    Download,
    Warning,
    Loading
  },
};
</script>

<style scoped>
.payment-container {
  min-height: calc(100vh - 180px);
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  padding: 40px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-wrapper {
  width: 100%;
  max-width: 800px;
  background: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.content-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #2d3437, #4893c6);
}

/* 微信支付指示器 */
.wechat-pay-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 15px;
  color: #09BB07;
  font-size: 14px;
  font-weight: 500;
  background: rgba(9, 187, 7, 0.08);
  padding: 6px 15px;
  border-radius: 20px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.wechat-icon {
  flex-shrink: 0;
}

/* 步骤条美化 */
.content-wrapper :deep(.el-steps) {
  margin-bottom: 40px;
}

.content-wrapper :deep(.el-step__title) {
  font-size: 16px;
  font-weight: 500;
}

.content-wrapper :deep(.el-step__icon.is-text) {
  border-color: #4893c6;
  color: #4893c6;
}

.content-wrapper :deep(.el-step__head.is-process) {
  color: #4893c6;
  border-color: #4893c6;
}

.content-wrapper :deep(.el-step__title.is-process) {
  color: #4893c6;
  font-weight: 600;
}

.content-wrapper :deep(.el-step__line) {
  background-color: #e0e0e0;
}

/* 金额展示 */
.amount-box {
  text-align: center;
  margin: 40px 0;
  padding: 20px;
  background: rgba(72, 147, 198, 0.05);
  border-radius: 8px;
  border: 1px dashed rgba(72, 147, 198, 0.3);
}

.amount-label {
  font-size: 18px;
  color: #555;
  letter-spacing: 1px;
}

.amount {
  font-size: 36px;
  color: #f56c6c;
  font-weight: bold;
  margin-left: 10px;
  position: relative;
  display: inline-block;
}

.amount::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #f56c6c, transparent);
}

/* 支付二维码 */
.qr-code-box {
  text-align: center;
  margin-bottom: 30px;
  padding: 30px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  position: relative;
  transition: transform 0.3s ease;
}

.qr-code-box:hover {
  transform: translateY(-5px);
}

.qr-code-box img {
  width: 220px;
  height: 220px;
  border: 5px solid #f8f9fa;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 支付提示文字 */
.payment-tip {
  margin-top: 15px;
  color: #f56c6c;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  animation: pulse-text 2s infinite;
  letter-spacing: 1px;
}

@keyframes pulse-text {
  0% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.8;
  }
}

/* 刷新按钮样式 */
.refresh-button {
  width: 100%;
  height: 54px;
  font-size: 16px;
  letter-spacing: 2px;
  margin-top: 20px;
  background: linear-gradient(135deg, #2d3437, #4893c6);
  border: none;
  box-shadow: 0 4px 12px rgba(72, 147, 198, 0.3);
  transition: all 0.3s ease;
}

.refresh-button:hover:not([disabled]) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(72, 147, 198, 0.4);
}

.refresh-button:active:not([disabled]) {
  transform: translateY(1px);
}

.refresh-button:disabled {
  background: linear-gradient(135deg, #91a4ac, #b3c9d6);
  cursor: not-allowed;
  opacity: 0.7;
}

/* 支付盒子整体样式 */
.payment-box {
  animation: fade-in 0.5s ease;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .content-wrapper {
    padding: 30px 20px;
    max-width: 90%;
  }

  .amount {
    font-size: 28px;
  }

  .qr-code-box {
    padding: 20px;
  }

  .qr-code-box img {
    width: 180px;
    height: 180px;
  }

  .payment-tip {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .payment-container {
    padding: 20px 10px;
  }

  .content-wrapper {
    padding: 20px 15px;
  }

  .amount-box {
    padding: 15px;
    margin: 20px 0;
  }

  .amount-label {
    font-size: 16px;
  }

  .amount {
    font-size: 24px;
  }

  .qr-code-box img {
    width: 150px;
    height: 150px;
    border-width: 3px;
  }

  .refresh-button {
    height: 46px;
    font-size: 14px;
  }

  .content-wrapper :deep(.el-step__title) {
    font-size: 14px;
  }
}
</style>